<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入react.js 文件 , 相当于引入vue.js -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <!--引入react-dom.js  引入react操作dom 文件 -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 使用jsx 语法时,需要借助babel 这个插件, 将jsx 语法编译成js 语法,这样浏览器才能加载识别 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>

</body>

</html>
<script type="text/babel">
    // 第一步: 获取根标签容器div
    let app = document.querySelector('#app')
    // 第二步: 使用react-dom 提供的一个大对象 ReactDOM 对象, 使用他里面的一个方法 createRoot 创建一个根实例
    let root = ReactDOM.createRoot(app);

    // 第三步: 方式2: 使用jsx 语法去渲染一个dom结构(后面都使用该种方式渲染)
    // jsx 语法介绍:
    //01: {} 中直接变量
    //02: jsx 模板中必须有一个根标签,否则报错
    //03:使用js 中的语法 ecmacsrtipt 语法 
    //04: 简单的逻辑运算 
    //05: 使用三目运算符 
    //06: jsx 中遍历数组必须只能使用map 方法, 返回一个新的dom结构的数组
    //07: react 的脚手架 叫做 create-react-app 
    // 使用脚手架创建项目有两种方式
    // 01: 免安装脚手架的方式  npx create-react-app 项目名称
    // 02: 首先全局安装脚手架 npm i -g create-react-app  接下来创建项目  create-react-app 项目名称
    const username = '梦想是人生的太阳';
    let num = 100;
    const age = 18;
    const imgurl = ''
    const linkdata = '<a href="https://www.baidu.com">百度一下</a>'
    const styleObj = { fontSize: '30px', color: 'red' }
    const userArr = [{ id: 1, name: "大s" }, { id: 2, name: "吴亦凡" }, { id: 3, name: "李铁" }]
    console.log(userArr.map((item, index) => <li>{index}--{item.name}</li>))
    const str = 'abcdefg';
    const newArr = [1, 2, 3, 4, 5]
    const el = (
        <div>
            <p>
                我是jsx语法结构的dom模板
            </p>
            <p>
                {username}
            </p>
            <p>
                {username.substr(0, 2)}
            </p>
            <p>{num++}</p>
            <p>{age >= 18 ? '成年' : '未成年'}</p>
            <img src={imgurl} alt="" />
            <p dangerouslySetInnerHTML={{ __html: linkdata }}></p>
            <p style={styleObj}>测试变量style 属性</p>
            {/*class属性只能使用className , 因为在react中class是声明类组件的关键字*/}
            <p className="box">class属性</p>

            <ul>
                {
                    userArr.map((item, index) => <li key={item.id}>{index}--{item.name}</li>)
                }
            </ul>
            <ul>
                {
                    str.split('').map((item, index) => <li key={index}>{index}--{item}</li>)
                }
            </ul>
            <hr />
            {/*直接遍历数组,该种方式不常用*/}
            <p>
                {newArr}
            </p>
        </div>
    )
    root.render(el)


</script>